<template>
  <div class="app-container">
    <el-form
      class="searchform"
      :model="queryParams"
      ref="queryParams"
      size="small"
      label-width="80px"
    >
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="状态">
            <el-select
              v-model="queryParams.state"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in dict.type.download_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="模块类型">
            <el-select
              v-model="queryParams.moduleType"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="item in dict.type.module_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="9">
          <el-form-item label-width="0">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getList()"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="reset()"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <el-table
      v-loading="loading"
      :data="dataList"
      :height="height - 350 + 'px'"
    >
      <el-table-column label="序号" type="index" width="50" align="center" />
      <el-table-column
        label="文件名称"
        align="center"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <span
            @click="viewFile(scope.row)"
            :class="scope.row.ossId && 'viewfile'"
            >{{ scope.row.fileName }}</span
          >
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="{ row }">
          <dict-tag
            :value="row.state"
            :options="dict.type.download_type"
          ></dict-tag>
        </template>
      </el-table-column>
      <el-table-column label="模块类型" align="center">
        <template slot-scope="{ row }">
          <dict-tag
            :value="row.moduleType"
            :options="dict.type.module_type"
          ></dict-tag>
        </template>
      </el-table-column>
      <el-table-column label="下载时间" align="center" prop="createTime" />
      <el-table-column label="备注" align="center" prop="remark" />
      <!-- <el-table-column
        align="center"
        label="操作"
				width="200">
        <template slot-scope="{row}">
					<el-button
						@click.native.prevent="openDialog(row)"
						type="text">
						编辑
					</el-button>
          <el-button
            @click.native.prevent="handleDelete(row)"
            type="text"
						style="color: #f32d2d">
            删除
          </el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  listFileDownload,
  updateFileDownloadState,
  notDownloadCount,
} from "@/api/system/download";
import { listOss, listByIds, delOss } from "@/api/system/oss";
export default {
  name: "download",
  dicts: ["download_type", "module_type"],
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      // 视图高度
      height: document.documentElement.clientHeight,
      // 列表
      dataList: [],
      total: 0,
      loading: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 获取文件下载列表
    getList() {
      //更新未查看文件数量
      this.resetSetItem();
      this.loading = true;
      listFileDownload(this.queryParams)
        .then((response) => {
          this.dataList = response.rows;
          this.total = response.total;
          this.loading = false;
        })
        .catch((response) => {
          console.log("responseresponse", response);
          this.loading = false;
        });
    },
    // 列表文件预览
    viewFile(row) {
      let _this = this;
      let ossId = row.ossId;
      if (ossId) {
        listByIds(ossId).then((response) => {
          window.open(response.data[0].url, "PDF", "");
        });
        if (row.state == 0 || row.state == 1 || row.state == 2) {
          let data = {
            id: row.id,
            state: 4,
          };
          //更新已查看状态
          updateFileDownloadState(data).then(() => {
            this.getList();
          });
        }
      } else {
        this.$modal.msgWarning("暂无文件");
      }
    },
    // 重置
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
      };
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.viewfile {
  color: #2a72ee;
  cursor: pointer;
  margin-right: 10px;
  &:hover {
    text-decoration: underline;
  }
}
</style>
